// src/pages/Login.tsx
import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { authApi } from '../../api/auth';
import '../../styles/Auth.css';

const Login = () => {
  const [loginType, setLoginType] = useState<'password' | 'sms'>('password');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [phone, setPhone] = useState('');
  const [smsCode, setSmsCode] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const navigate = useNavigate();

  const handlePasswordLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      const res = await authApi.login({ username, password });
      localStorage.setItem('token', res.data.accessToken);
      localStorage.setItem('refreshToken', res.data.refreshToken);
      navigate('/home');
    } catch (err) {
      setError('登录失败，请检查用户名和密码');
    } finally {
      setIsLoading(false);
    }
  };

  const handleSmsLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      const res = await authApi.smsLogin({ phone, code: smsCode });
      localStorage.setItem('token', res.data.accessToken);
      localStorage.setItem('refreshToken', res.data.refreshToken);
      navigate('/home');
    } catch (err) {
      setError('登录失败，请检查验证码');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="huawei-auth-container">
      <h1 className="huawei-title">华为账号登录</h1>
      
      <div className="huawei-tabs">
        {/* <button 
          className={loginType === 'password' ? 'active' : ''}
          onClick={() => setLoginType('password')}
        >
          密码登录
        </button> */}
        {/* <button 
          className={loginType === 'sms' ? 'active' : ''}
          onClick={() => setLoginType('sms')}
        >
          短信验证码登录
        </button> */}
      </div>

      {/* {loginType === 'password' ? ( */}
        <form onSubmit={handlePasswordLogin}>
          <div className="huawei-input-group">
            <input
              type="text"
              placeholder="手机号/邮件地址/账号名"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              required
            />
          </div>
          <div className="huawei-input-group">
            <input
              type="password"
              placeholder="密码"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <button type="submit" className="huawei-primary-btn" disabled={isLoading}>
            {isLoading ? '登录中...' : '登录'}
          </button>
        </form>
      {/* ) : (
        <form onSubmit={handleSmsLogin}>
          <div className="huawei-input-group">
            <input
              type="text"
              placeholder="手机号"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              required
            />
          </div>
          <div className="huawei-input-group with-code">
            <input
              type="text"
              placeholder="短信验证码"
              value={smsCode}
              onChange={(e) => setSmsCode(e.target.value)}
              required
            />
            <button type="button" className="huawei-code-btn">
              获取验证码
            </button>
          </div>
          <button type="submit" className="huawei-primary-btn" disabled={isLoading}>
            {isLoading ? '登录中...' : '登录'}
          </button>
        </form>
      )} */}

      {error && <div className="huawei-error">{error}</div>}

      <div className="huawei-footer-links">
        <Link to="/register">注册</Link>
        <Link to="/forgot-password">忘记密码</Link>
        <Link to="/help">遇到问题</Link>
      </div>
    </div>
  );
};

export default Login;